<!--单计组下拉-->
<template>
    <div class="unit-search-wrapper">
        <a-select :disabled="!incomingData.onEdit" showSearch option-label-prop="value" v-model="incomingData.valueName" @change="handleChange" :placeholder="`请选择${incomingData.name}`">
            <a-select-opt-group>
                <span slot="label">
                    <a-row class="name">
                        <a-col :span="12">编码</a-col>
                        <a-col :span="12" class="padding-left-5">名称</a-col>
                    </a-row>
                </span>
                <a-select-option v-for="item in data" :data="item" :key="item.code + item.name">
                    <a-row class="content">
                        <a-col :span="12">{{item.code}}</a-col>
                        <a-col :span="12">{{item.name}}</a-col>
                    </a-row>
                </a-select-option>
            </a-select-opt-group>
        </a-select>
    </div>
</template>
<script>
import { unitGroupList } from "@/api/inventory/unitGroup";
import { pageList } from "@/api/inventory/unit";

export default {
    props: {
        incomingData: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            data: [],
            selectedData: [],
        }
    },
    created() {
        this.getList();
    },
    methods: {
        handleChange(e, option) {
            let selectedData = option.data.attrs.data;
            console.log(selectedData);
            let val = [];
            this.$set(selectedData, 'propertyName', 'unitGroupId');
            Object.assign(this.selectedData, selectedData)
            this.getGrouplist(selectedData.id)
        },
        getGrouplist(id,name) {
            //此处要请求计量单位组下面的组单位
            let { selectedData } = this;
            let requestData = {
                current: 1,
                size: 20,
                unitGroupId: id
            }
            pageList(requestData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records } = data;

                    if (records == '' || records == null) {
                        //计量组下面没有组单位
                        this.$message.error('该计量组下面没有计量单位');
                        return false;
                    } else {
                        let val = [];
                        // records.map(o => o.name).join(',')
                        //给众多计量单位设置下拉选项
                        for (let i = 0; i < records.length; i++) {
                            val.push({
                                id: records[i].id,
                                name: records[i].name
                            })
                        }
                        //!---------------------------☆
                        if(name){
                            this.selectedData.name = name;
                            this.selectedData.id = id;
                        }
                        //!---------------------------☆
                        this.$set(selectedData, 'val', val)
                        this.$set(selectedData, 'detailsData', data.records)

                        //传入主计量单位
                        for (let i = 0; i < records.length; i++) {
                            if (records[i].isMainUnit) {
                                this.$set(selectedData, 'mainUnitId', records[i].id)
                                this.$set(selectedData, 'mainUnitName', records[i].name)
                            }
                        }

                        this.$emit('okUnit', selectedData)
                    }
                }
            }).catch(error => { });
        },
        //获取计量列表
        getList() {
            const { postData } = this;
            unitGroupList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;

                    this.data = data;
                }
            }).catch(error => { });
        }
    }
}
</script>
<style lang="less" scoped>
.name {
    font-size: 16px;
}
.content {
    text-align: left;
}
.unit-search-wrapper {
    position: relative;
    width: 100%;
    height: 40px;
    .table-wrapper {
        position: absolute;
        top: 40px;
        left: 0;
        width: 190px;
        box-shadow: 1px 2px 5px #ccc;
        background: #fff;
        z-index: 9999;
    }
    .table-btn {
        text-align: center;
    }
}
</style>